<template>
  <div class="wrapper">
    <div class="topBar">
      <h2>本月</h2>
      <ul>
        <li>dddd</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>qqw</li>
        <li>eee</li>
        <li>w3w4w</li>
        <li>ww23w</li>
        <li>ww12</li>
        <li>w22w</li>
      </ul>
    </div>
    <div class="topBar">
      <h2>10月</h2>
      <ul>
        <li>1111</li>
        <li>剁手</li>
        <li>11-11</li>
        <li>花费</li>
        <li>hahhh</li>
        <li>dddd</li>
        <li>dddd</li>
      </ul>
    </div>
    <div class="topBar">
      <h2>9月</h2>
      <ul>
        <li>1111</li>
        <li>剁手</li>
        <li>11-11</li>
        <li>花费</li>
        <li>hahhh</li>
        <li>dddd</li>
        <li>dddd</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrapper {
  width: 373px;
  height: 400px;
  border: 1px dotted #000;
  margin-left: 50px;
  margin-top: 50px;
  overflow: scroll;
}
.topBar h2 {
  height: 50px;
  width: 100%;
  background: #ccc;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.wrapper ul li {
  height: 50px;
  border: 1px dashed #0f0;
}
</style>
